<template>
  <div class="daa">
    <div class="gw">
          <img :src="imgs" alt="">
          <p>购物车</p>
      </div>
      <div class="mmm">
        <div v-for="(v,index) in shang" :key="index" class="bbx">
          <div class="igs"><img :src="v.img" alt=""></div>
          <div>
              <div class="shangdd">{{v.category}}</div>
              <div class="sscsdc">{{v.proname}}</div>
              <div class="namssf">
                <div class="fffc">{{v.originprice}}</div>
                <div class="nscscsc" @click="shanchu(v.id)">删除</div>
              </div>          
          </div>         
      </div>
      </div>
      <van-submit-bar :price="ps" button-text="提交订单" class="nams"/>
      <buttom></buttom>
  </div>
</template>
  
<script>
import buttom from './zujian/buttom.vue'
import activeArticle from '../../mock/data.json'
export default {
    data(){
          return{
            activeArticle,
            timer:null,
            shang:[],
            ps:0,
            imgs:""                
          }
      },
      components:{
        buttom
      },
      mounted(){
        
        // this.timer=setInterval(()=>{
          this.$http({
            url:"http://localhost:3000/gwcxx",
            method:"get"
        }).then(res=>{
            this.shang = res.data;
        })
        // },1000)
        // this.timer=setInterval(this.funss,1000)
      },
      methods:{
        shanchu(xx){
          this.$http({
            url:`http://localhost:3000/gwcxx/${xx}`,           
            method:"delete"
        }).then(res=>{
          // console.log(res.data);
        })
        },
        funss(){
          this.ps = 0
          for(let i=0;i<this.shang.length;i++){           
            var ccc = this.shang[i].originprice
            ccc = ccc.substring(1)
            this.ps+=ccc*100
          }
        }
      },
      computed:{
        get:function(){
					for (let i = 0; i < this.arr2.length; i++) {
						return this.sum+=this.arr2[i];
					}
					
				}
      },
      watch: {
        activeArticle: {
        handler(newValue, oldValue) { 
          this.$http({
            url:"http://localhost:3000/gwcxx",
            method:"get"
        }).then(res=>{
            this.shang = res.data;
        })
      },
      deep: true
    }
  }
}
</script>


<style scoped>
.shangdd{
  margin-top: 3vw;
}
.nscscsc{
  position: absolute;
  bottom: 0;
  right: 2vw;
}
.namssf{
  display: flex;
  position: relative;
}
.sscsdc{
  font-size: 3vw;
  margin: 3vw 0;
  opacity: 0.7;
}
.mmm{
  padding-bottom: 50vw;
  margin-top: 13vw;
}
.fffc{
  color: rgba(255, 0, 0, 0.779);
  font-size: 6vw;
}
.bbx{
  width:90vw ;
  height: 30vw;
  display: flex;
  padding: 3vw 2vw;
  margin: 3vw 3vw;
  border-radius: 6px;
  background-color: #fff;
}
.nams{
    margin-bottom: 13vw;

}
.igs img{
  width: 24vw;
  height: 24vw;
}
.igs{
  width: 24vw;
  height: 24vw;
  margin: 3vw 7vw 3vw 3vw;
}
.vws{
  width: 100vw;
}

.gw{
    width: 100vw;
    height: 13vw;
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #f7f7f7;
}
  
.gw img {
    width: 7vw;
    height: 7vw;
    margin: 3vw 0 0 2vw;
}
  
.gw p {
    font-size: 4.5vw;
    margin: 3vw 0 0 37vw;
}
  
.daa{
  background-color: #f7f7f7;
  height: 100%;
}

</style>